<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="#0A5AF9">
    <title>常见问题</title>
    <link rel="stylesheet" type="text/css" href="../css/public-head.css" />
    <link rel="stylesheet" type="text/css" href="../css/common-problem.css" />
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/mui.min.css" />
    <style>
        html,
        body {
            background-color: #eeeeee;
        }

        .title {
            color: #0A5AFA;
            font-size: 15px;
        }
        /*弹出层*/

        #close {
            width: 30px;
            height: 30px;
            /*cursor: pointer;*/
            position: absolute;
            right: -30px;
            top: -30px;
            /*text-indent: -999em;*/
        }

        #close img {
            width: 30px;
        }

        #mask {
            background-color: rgba(0, 0, 0, .5);
            opacity: 0.7;
            filter: alpha(opacity=70);
            position: absolute;
            left: 0;
            top: 0;
            z-index: 1000;
        }
        /*弹出层*/

        #close {
            width: 30px;
            height: 30px;
            /*cursor: pointer;*/
            position: absolute;
            right: -30px;
            top: -30px;
            /*text-indent: -999em;*/
        }

        #close img {
            width: 30px;
        }

        #mask {
            background-color: rgba(0, 0, 0, .5);
            opacity: 0.7;
            filter: alpha(opacity=70);
            position: absolute;
            left: 0;
            top: 0;
            z-index: 1000;
        }

        #login {
            position: fixed;
            z-index: 1001;
        }

        .loginCon {
            position: relative;
            /*top: -100px;*/
            width: 300px;
            height: 400px;
            background: white;
            border-radius: 10px;
            /*border: 1px solid #333;*/
            /*text-align: center;*/
        }

        .loginCon p {
            /*text-indent: 2em;*/
            font-size: 16px;
        }

        .loginCon>div {
            text-align: center;
            margin: 20px;
            font-size: 18px;
        }

        .loginCon>div>div>div {
            width: 5px;
            height: 5px;
            background: blue;
            border-radius: 50%;
            margin-right: 4px;
        }

        .loginCon-title {
            padding: 20px 0;
            display: flex;
            align-items: center;
        }
    </style>
</head>

<body>

    <div class="main">
        <div id="listing">
            <!--<div class="main-list">
            <div class="list_gren">
                <div class="title" style="color: #0A5AFA;">·&nbsp;加油卡充值产品</div>
            </div>
            <div class="list_gren">
                <div>购买须知</div>
                <span><img src="../image/icon/ARROWRIGHT@2x.png" alt="" /></span>
            </div>
            <div class="list_gren">
                <div>购买后如何圈存和加油</div>
                <span><img src="../image/icon/ARROWRIGHT@2x.png" alt="" /></span>
            </div>
            <div class="list_gren">
                <div>加油充值到账时间</div>
                <span><img src="../image/icon/ARROWRIGHT@2x.png" alt="" /></span>
            </div>
            <div class="list_gren list-border">
                <div>发票开具问题</div>
                <span><img src="../image/icon/ARROWRIGHT@2x.png" alt="" /></span>
            </div>
        </div>
        <div class="main-list">
            <div class="list_gren">
                <div class="title" style="color: #0A5AFA;">·&nbsp;支付问题</div>
            </div>
            <div class="list_gren">
                <div>支付宝支付问题</div>
                <span><img src="../image/icon/ARROWRIGHT@2x.png" alt="" /></span>
            </div>
            <div class="list_gren">
                <div>微信支付问题</div>
                <span><img src="../image/icon/ARROWRIGHT@2x.png" alt="" /></span>
            </div>
        </div>
        <div class="main-list">
            <div class="list_gren">
                <div class="title" style="color: #0A5AFA;">·&nbsp;售后问题</div>
            </div>
            <div class="list_gren">
                <div>退款规则与流程</div>
                <span><img src="../image/icon/ARROWRIGHT@2x.png" alt="" /></span>
            </div>
        </div>-->
        </div>
    </div>
</body>
<script type="text/javascript" src="../script/public-head.js"></script>
<script type="text/javascript" src="../script/rem.js"></script>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/mui.js"></script>
<script type="text/javascript" src="../script/template-web.js"></script>
<script id="questionsList" type="text/html">
    {{each data}}
    <div class="main-list">
        <div class="list_gren">
            <div class="title" style="color: #0A5AFA;">·&nbsp;{{$value.group_name}}</div>
        </div>
        {{each $value.article}}
        <div class="list_gren" onclick="toAbstract({{$value}})">
            <div>{{$value.title}}</div>
            <span><img src="../image/icon/ARROWRIGHT@2x.png" alt="" /></span>
        </div>
        {{/each}}
    </div>
    {{/each}}
</script>
<script type="text/javascript">
    apiready = function() {
        init();
        fnQuestionsList();
    }
    headInner({
            title: "",
            //headleft
            headl: '<a  style="color:white" class="mui-icon mui-icon-left-nav" tapmode onclick="api.closeWin()"></a>',
            //headright
            headr: '<a style="color:white"></a>',
            color: "", //默认是蓝色
            padding: "0px 0px 0px",
        })
        // 弹出层
        // function dialog(data) {
        //     //获取页面的高度和宽度
        //     var sWidth = document.body.scrollWidth || document.documentElement.scrollWidth;
        //     var sHeight = document.body.scrollHeight || document.documentElement.scrollHeight;
        //     //获取页面的可视区域高度和宽度
        //     var wHeight = document.documentElement.clientHeight || document.body.clientHeight;
        //
        //     //创建遮罩层
        //     var oMask = document.createElement("div");
        //     oMask.id = "mask";
        //     oMask.style.height = sHeight + "px";
        //     oMask.style.width = sWidth + "px";
        //     document.body.appendChild(oMask); //添加到body末尾
        //
        //
        //     //获取关闭按钮
        //     var oClose = document.getElementById("close");
        //
        //     //点击关闭按钮和点击登陆框以外的区域都可以关闭登陆框
        //     oClose.onclick = function() {
        //         document.body.removeChild(oMask);
        //     };
        //     oMask.onclick = function() {
        //         document.body.removeChild(oMask);
        //     };
        // }
        //获取常见问题列表
    function fnQuestionsList() {
        BASE.MYajax({
            'pathName': 'home/getQuestion', //请求路径
            'method': backData //调用函数
        });
    }

    function backData(ret, err) {
        if (ret.code == 200) {
            console.log("列表列表呀" + JSON.stringify(ret));
            var html = template('questionsList', ret); //绑定htmlid
            document.getElementById('listing').innerHTML = html; //绑定模板id
        } else {
            reToast(ret, err)
        }
    };

    // 常见问题
    function toAbstract(data) {
        console.log(JSON.stringify(data));
        //获取页面的高度和宽度
        var sWidth = document.body.scrollWidth || document.documentElement.scrollWidth;
        var sHeight = document.body.scrollHeight || document.documentElement.scrollHeight;
        //获取页面的可视区域高度和宽度
        var wHeight = document.documentElement.clientHeight || document.body.clientHeight;

        //创建遮罩层
        var oMask = document.createElement("div");
        oMask.id = "mask";
        oMask.style.height = sHeight + "px";
        oMask.style.width = sWidth + "px";
        document.body.appendChild(oMask); //添加到body末尾

        //创建登录框
        var oLogin = document.createElement("div");
        oLogin.id = "login";
        // oLogin.innerHTML = "<div style='background-color:red'>"+ data.title + data.abstract+"</div>";
        oLogin.innerHTML = "<div class='loginCon'><div><div class='loginCon-title'><div></div>" + data.title + "</div><p>" + data.abstract + "</p></div><div id='close'><img src='../image/icon/cdacha.png'/></div></div>";
        document.body.appendChild(oLogin);

        //获取登陆框的宽和高
        var dHeight = oLogin.offsetHeight;
        var dWidth = oLogin.offsetWidth;

        //设置登陆框的left和top
        oLogin.style.left = sWidth / 2 - dWidth / 2 + "px";
        oLogin.style.top = wHeight / 2 - dHeight / 2 + "px";

        //获取关闭按钮
        var oClose = document.getElementById("close");

        //点击关闭按钮和点击登陆框以外的区域都可以关闭登陆框
        oClose.onclick = function() {
        	document.body.removeChild(oLogin);
        	document.body.removeChild(oMask);
        };
        oMask.onclick = function() {
            document.body.removeChild(oLogin);
            document.body.removeChild(oMask);
        };
    }
</script>

</html>
